<template>
  <view>
    <!-- pages/xzchuzhika/xzchuzhika.wxml -->
    <view class="page">
      <view class="xzcxk_h1">订单应付金额：￥{{ order_pay }}</view>
      <view class="xzcxk_kk">
        <view class="xzcxk_kk1">
          <view class="xzcxk_kk2">
            <view class="xzcxk_kk2_h1">{{ rechargCard.title }}</view>
            <view class="xzcxk_kk2_h2">（￥{{ rechargCard.money }}）</view>
          </view>

          <view class="xzcxk_kk2">
            <view class="xzcxk_kk2_h3">充值卡</view>
            <view>
              <view class="xzcxk_kk2_h4">充值余额1元</view>
              <view class="xzcxk_kk2_h4">赠送余额0元</view>
            </view>
          </view>

          <view class="xzcxk_kk2">
            <view class="xzcxk_kk2_h5">使用规则：同比例扣除</view>
            <view class="xzcxk_kk2_h5">有效期限：不限期</view>
          </view>
        </view>

        <view class="xzcxk_kk3">
          <view>使用金额</view>
          <view>￥{{ order_pay }}</view>
        </view>
      </view>
    </view>

    <view class="di" @tap="useasa()">
      <view class="di_xzczk">
        <view>立即使用</view>
      </view>
    </view>
  </view>
</template>

<script>
// pages/xzchuzhika/xzchuzhika.js
import {userrechargCard} from "@/common/api";
import {math} from "@/common/mathutils";

export default {
  data() {
    return {
      order_pay: 0,
      rechargCard: {}
    };
  }
  /**
   * 生命周期函数--监听页面加载
   */,
  onLoad(options) {
    this.order_pay = options.order_pay
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.getdata()
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  },
  methods: {
    // 使用地区
    useasa() {
      let pages = getCurrentPages(); //获取所有页面栈实例列表

      let prevPage = pages[pages.length - 2]; //上一页页面实例
      prevPage.$vm.payment = 2; //修改上一页data里面的地址

      if (math.subtract(parseFloat(this.order_pay), parseFloat(this.rechargCard.money)) > 0) {
        prevPage.$vm.curpay = math.subtract(parseFloat(this.order_pay), parseFloat(this.rechargCard.money))
      } else {
        prevPage.$vm.curpay = 0
      }

      uni.navigateBack({
        delta: 1 //返回层数，2则上上页
      });
    },
    // 获取数据
    getdata() {
      userrechargCard(res => {
        this.setData({
          rechargCard: res.data.data
        });
        console.log('userrechargCard', res)
      })
    }
  }
};
</script>
<style>
.page {
  height: 97vh;
  background-color: rgb(247, 247, 247);
  padding: 20rpx 20rpx 20rpx 20rpx;
}

.xzcxk_h1 {
  font-weight: bold; /* 设置字体加粗 */
  color: rgb(87, 83, 83);
  font-size: 30rpx;
}

.xzcxk_kk {
  margin: 40rpx 0 0 0;
  height: 300rpx;
  background-color: rgb(83, 83, 82);
  border-radius: 12rpx; /* 设置边框圆角 */
}

.xzcxk_kk1 {
  height: 235rpx;
  background-color: rgb(194, 162, 104);
  border-radius: 12rpx; /* 设置边框圆角 */
}

.xzcxk_kk2 {
  display: flex;
  justify-content: space-between; /* 子元素之间平均分布在容器中 */
  color: rgb(121, 68, 19);
  padding: 30rpx 30rpx 0 30rpx;
}

.xzcxk_kk3 {
  display: flex;
  justify-content: space-between; /* 子元素之间平均分布在容器中 */
  color: rgb(255, 255, 255);
  padding: 10rpx 30rpx 0 30rpx;
  font-size: 28rpx;
}

.xzcxk_kk2_h1 {
  font-weight: bold; /* 设置字体加粗 */
  font-size: 35rpx;
}

.xzcxk_kk2_h2 {
  font-size: 30rpx;
  color: rgb(255, 255, 255);
}

.xzcxk_kk2_h3 {
  font-size: 30rpx;
}

.xzcxk_kk2_h4 {
  font-size: 20rpx;
  color: rgb(255, 255, 255);
}

.xzcxk_kk2_h5 {
  margin-top: -10rpx;
  font-size: 20rpx;
}

.di_xzczk {
  background-color: rgba(194, 163, 104, 0.603);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 700rpx;
  height: 90rpx;
  margin: -70rpx 20rpx 0 20rpx;
  border-radius: 10rpx; /* 设置边框圆角 */
}
</style>
